import React, { Component } from "react";
import { CheckCircleOutlined, StopOutlined } from '@ant-design/icons';
import { Button, message, Divider } from "antd";
import { getApplyList, applyExamine } from "@/api/apply";
import TableComponent from '@/components/TableList';
import SearchHeader from '@/components/SearchHeader';
import { getToolTip, getStatus} from '@/utils/renderCell'
import { widgetProps } from '@/utils/constant';
class User extends Component {
  tableRef = React.createRef();
  state = {
    list: [],
    listQuery: {},
  };

  // 表格数据更新 抛出数据
  handleGetData = data => {
    this.setState({
      list: data.list
    })
  }
  // 处理搜索
  handleSearch = (listQuery) => {
    this.setState({
      listQuery
    });
  };


  handleExamine = (row, status) => {
    const { memberId } = row
    applyExamine({ applyId: memberId, status }).then(res => {
      message.success(status === 1 ? "审核通过" : "审核不通过")
      this.tableRef.current.fetchData();
    })
  }

  // 头部搜索
  meta = {
    fields: [
      {
        key: 'mobile',
        label: '手机号',
        widgetProps
      }
    ],
  };

  // 表格列 字段定义
  columns = [
    {
      title: '申请ID',
      dataIndex: 'id',
      key: 'id',
      width: 80,
    },
    {
      title: '申请业务流水号',
      dataIndex: 'code',
      key: 'code',
      width: 280,
    },
    {
      title: '申请者ID',
      dataIndex: 'memberId',
      width: 120,
      key: 'memberId',
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      width: 150,
      key: 'nickName',
    },
    {
      title: '真名',
      dataIndex: 'realName',
      width: 120,
      key: 'realName',
    },
    {
      title: '手机号',
      dataIndex: 'mobile',
      width: 120,
      key: 'mobile',
    },
    {
      title: '认证内容',
      dataIndex: 'content',
      width: 180,
      key: 'content',
      render: getToolTip
    },

    {
      title: '审核状态',
      dataIndex: 'status',
      key: 'status',
      width: 110,
      render: getStatus
    },
    {
      title: '申请时间',
      dataIndex: 'createTime',
      width: 180,
      key: 'createTime',
    },
    {
      title: '最后修改时间',
      dataIndex: 'updateTime',
      width: 180,
      key: 'updateTime',
    },
    {
      title: '操作',
      key: 'action',
      width: 260,
      fixed: 'right',
      render: (row) => (
        <span>
          <Button type="primary" icon={<CheckCircleOutlined />} title="agree" onClick={this.handleExamine.bind(null, row, 1)} >通过</Button>
          <Divider type="vertical" />
          <Button type="primary" icon={<StopOutlined />} title="disagree" onClick={this.handleExamine.bind(null, row, 2)} >不通过</Button>
        </span>
      )
    }
  ];
  render() {

    return (
      <>
        <SearchHeader onSearch={this.handleSearch} meta={this.meta}/>
        <br />
        <TableComponent
          tableConfig={{
            scroll: { y: 600, x: 1000 }
          }}
          getTableListApi={getApplyList}
          columns={this.columns}
          queryParams={this.state.listQuery}
          ref={this.tableRef}
          onGetData={this.handleGetData} />
        {/* <EditForm
          title={this.state.editMode ? 'Edit User' : 'Add User'}
          editMode={this.state.editMode}
          currentRowData={this.state.currentRowData}
          visible={this.state.editUserModalVisible}
          onCancel={this.handleCancel}
          onOk={this.hadnleAditAddOkHandler}
        /> */}
      </>
    );
  }
}

export default User;
